<template>
  <div class="app-container approvePanl">
    <div class="top">
      <span class="title">{{approve.name}}</span>
      <div class="header">
        <div class="tabs">
          <div class="tab" :class="{'active':index === active}" @click="active = index" v-for="(name,index) in tab" :key="index">
            <span class="number">{{index+1}}</span><span>{{name}}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <el-button size="small" type="info" @click="SaveConfig()">取消</el-button>
        <el-button size="small" type="success" :loading="saveLoading" @click="SaveConfig()">发布</el-button>
      </div>
    </div>
    <div class="content">
      <el-form v-if="active === 0" ref="mform" class="basic" :model="approve" :rules="approveRules" label-width="80px">
        <el-form-item label="审批名称" prop="name" :error="error.name">
          <el-input v-model="approve.name" placeholder="请输入审批名称"></el-input>
        </el-form-item>
        <el-form-item label="分组" prop="group" :error="error.group">
          <el-select v-model="approve.group" placeholder="请选择分组">
            <el-option v-for="item in []" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批描述" prop="desc" :error="error.desc">
          <el-input type="textarea" v-model="approve.desc" placeholder="请输入审批描述"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" :loading="approveLoading" @click="NextInfo()">下一步</el-button>
        </el-form-item>
      </el-form>
      <designer v-show="active === 1" @changed="getwidget" :node="node"></designer>
      <flowpath v-show="active === 2" @changed="getflowpath" :widgetList="widgetList"></flowpath>
    </div>
  </div>
</template>

<script>
// 载入表单设计组件
import designer from './componentDesigner/designer'
// 载入流程设计组件
import flowpath from './componentFlowPath/flowpath'

export default {
  name: 'approveConfigEdit',
  components: { designer, flowpath },
  data () {
    return {
      active: 0,
      tab: ['基础设置', '表单设计', '流程设计', '高级设置'],
      approve: {
        name: '测试',
        group: null,
        desc: ''
      },
      approveLoading: false,
      approveRules: {
        name: [
          { required: true, message: '请输入审批名称', trigger: 'blur' },
          {
            min: 5,
            max: 20,
            message: '长度在 5 到 20 个字符',
            trigger: 'blur'
          }
        ],
        group: [{ required: true, message: '请选择分组', trigger: 'change' }]
      },
      error: {},
      saveLoading: false,
      widgetList: [],
      node: {}
    }
  },
  created () {},
  methods: {
    NextInfo () {
      this.$refs.mform.validate((valid) => {
        if (valid) {
          // this.approveLoading = true;
          // this.error = {};
          // Test(this.approve)
          //   .then(() => {
          //     Message.success("操作成功");
          //   })
          //   .catch((res) => {
          //     if (res.data) {
          //       this.error = res.data;
          //     }
          //   })
          //   .finally(() => {
          //     this.approveLoading = false;
          //   });
        }
      })
    },
    getwidget (data) {
      this.widgetList = data
    },
    getflowpath (data) {
      this.node = data
    },
    SaveConfig () {
      console.log('---------表单设计JSON----------')
      console.log(JSON.stringify(this.widgetList))
      console.log('---------流程设计JSON----------')
      console.log(JSON.stringify(this.node))
      alert('已打印到控制面板，请F12查看')
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  .top {
    z-index: 101;
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(17, 31, 44, 0.06);
    .title {
      display: inline-block;
      max-width: 240px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #111f2c;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 15px;
    }
    .header {
      position: absolute;
      text-align: center;
      left: 0;
      right: 0;
      .tabs {
        position: relative;
        display: inline-block;
        align-items: center;
        justify-content: center;
        .tab {
          position: relative;
          display: inline-block;
          padding: 16px 16px;
          text-decoration: none;
          font-size: 14px;
          color: rgba(17, 31, 44, 0.56);
          cursor: pointer;
          .number {
            display: inline-block;
            color: #979797;
            background: #fff;
            border: 1px solid #979797;
            width: 14px;
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            margin-right: 6px;
            border-radius: 50%;
          }
        }
        .tab.active {
          color: #8bc349;
          .number {
            font-weight: normal;
            color: #fff;
            background: #8bc349;
            border: 1px solid #8bc349;
          }
        }
      }
    }
    .right {
      position: absolute;
      right: 10px;
    }
  }
  .content {
    width: 100%;
    padding-top: 54px;
    background: #fff;
    overflow: auto;
    .basic {
      width: 400px;
      padding: 30px;
      ::v-deep .el-select {
        display: block;
      }
    }
  }
}
</style>
<style lang="scss">
/*防止样式污染*/
.approvePanl {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #ccc;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #f5f5f5;
  }
}
</style>
